import React, { Component } from 'react'
import propTypes from 'prop-types' //组件传值类型校验

export default class Footer extends Component {
  render() {
    const { leftList, showList, condition } = this.props
    return (
      <div>
        <footer className="footer">
          <span className="todo-count">
            <strong>{leftList.length}</strong> item left
          </span>
          <ul className="filters">
            <li>
              <a
                className={condition === 'All' ? 'selected' : ''}
                href="#/"
                onClick={() => {
                  showList('All')
                }}
              >
                All
              </a>
            </li>
            <li>
              <a
                className={condition === 'Active' ? 'selected' : ''}
                href="#/active"
                onClick={() => {
                  showList('Active')
                }}
              >
                Active
              </a>
            </li>
            <li>
              <a
                className={condition === 'Completed' ? 'selected' : ''}
                href="#/completed"
                onClick={() => {
                  showList('Completed')
                }}
              >
                Completed
              </a>
            </li>
          </ul>
          <button
            className="clear-completed"
            onClick={this.props.removeComplete}
          >
            Clear completed
          </button>
        </footer>
      </div>
    )
  }
}
Footer.propTypes = {
  leftList: propTypes.array,
  showList: propTypes.func,
  condition: propTypes.string,
}
